/*
 * @Description: 
 * @Author: hurongchao
 * @Date: 2024-11-25 14:07:25
 * @LastEditors: HuRrongChao
 * @LastEditTime: 2025-02-23 19:58:31
 */
import { Plugin } from 'xgplayer'

const { POSITIONS } = Plugin

export class sharePlugin extends Plugin {
  // 插件的名称，将作为插件实例的唯一key值
  static get pluginName() {
    return 'sharePlugin'
  }

  static get defaultConfig() {
    return {
      text: '这是插件sharePlugin的Text',
      // 挂载在controls的右侧，如果不指定则默认挂载在播放器根节点上
      position: POSITIONS.CONTROLS_RIGHT
    }
  }

  // eslint-disable-next-line no-useless-constructor
  constructor(args) {
    super(args)
  }

  beforePlayerInit() {
    // TODO 播放器调用start初始化播放源之前的逻辑
  }

  afterPlayerInit() {
    // TODO 播放器调用start初始化播放源之后的逻辑
  }

  afterCreate() {
    this.tipDom = this.find('.share-tips')

    this.onIconTips = (e) => {
      if (this.tipDom) this.tipDom.style.display = 'block'
    }
    this.leaveIconTips = (e) => {
      if (this.tipDom) this.tipDom.style.display = 'none'
    }
    // this.onClick = () => {
    //   console.log('当前插件根节点点击事件')
    // }

    // 对当前插件根节点绑定事件
    // this.bind('click', this.onClick)
    this.bind('mouseenter', this.onIconTips)
    this.bind('mouseleave', this.leaveIconTips)
    // TODO 插件实例化之后的一些逻辑
  }

  destroy() {
    // this.unbind('click', this.onClick)
    this.unbind('mouseenter', this.onIconTips)
    this.unbind('mouseleave', this.leaveIconTips)
    this.tipDom = null
    // 播放器销毁的时候一些逻辑
  }

  render() {
    const svgString = `
      <div class="share-plugin" style="position: relative;">
        <svg class="svg-icon" aria-hidden="true" style="font-size: 40px; width: 1em; height: 1em; vertical-align: -0.15em; fill: #fff; overflow: hidden; margin: 1px 10px 0 -6px;">
          <use xlink:href="#icon-fenxiang-cu"></use>
        </svg>
        <div class="share-tips xg-tips  " style="top: -30px; left: -15px;">分享素材</div>
      </div>
    `
    return svgString
  }
}

export class inputPlugin extends Plugin {
  // 插件的名称，将作为插件实例的唯一key值
  static get pluginName() {
    return 'inputPlugin'
  }

  static get defaultConfig() {
    return {
      text: '这是插件inputPlugin的Text',
      position: POSITIONS.CONTROLS_RIGHT,
      index: 5
    }
  }

  // eslint-disable-next-line no-useless-constructor
  constructor(args) {
    super(args)
  }

  afterCreate() {
    this.tipDom = this.find('.input-tips')
    this.inputDom = this.find('.input-plugin')
    this.buttonDom = this.find('.input-button')

    this.onIconTips = (e) => {
      if (this.tipDom) this.tipDom.style.display = 'block'
    }
    this.leaveIconTips = (e) => {
      if (this.tipDom) this.tipDom.style.display = 'none'
    }
    this.bind('mouseenter', this.onIconTips)
    this.bind('mouseleave', this.leaveIconTips)
  }

  destroy() {
    this.unbind('mouseenter', this.onIconTips)
    this.unbind('mouseleave', this.leaveIconTips)
    if (this.buttonDom) {
      this.buttonDom.onclick = null
    }
    this.tipDom = null
    this.inputDom = null
    this.buttonDom = null
    // 播放器销毁的时候一些逻辑
  }

  render() {
    const inputString = `
      <div class="input-plugin" style="position: relative;">
        <input class="input-plugin" style="
          position: relative;
          width: 300px;
          height: 30px;
          margin: 5px 10px;
          padding: 0 10px;
          border: 1px solid rgba(255, 255, 255, 0.3);
          border-radius: 15px;
          background: rgba(0, 0, 0, 0.3);
          color: #fff;
          font-size: 14px;
          outline: none;
        ">
        </input>
        <button class="input-button" style="
          height: 30px;
          padding: 0 15px;
          margin-right: 15px;
          border: none;
          border-radius: 10px;
          background: rgba(64, 158, 255, 0.9);
          color: #fff;
          font-size: 14px;
          cursor: pointer;
          transition: all 0.3s;
        ">发送</button>
        <div class="input-tips xg-tips  " style="top: -30px; left: 15px;">发送弹幕</div>
      </div>
    `
    return inputString
  }
}

